<template>
	<div class="resources">
		<div class="image">
			<router-link :to="'/articleDetail/'+article.id">
				<img :src="article.cover">
			</router-link>
		</div>
		<div class="title">
			<h4>
				<router-link :to="'/articleDetail/'+article.id">{{article.title}}</router-link>
			</h4>
		</div>
		<div class="describe">
			<router-link :to="'/articleDetail/'+article.id">
				<p>{{article.describe}}</p>
			</router-link>
		</div>
    <div class="info">
      <!-- <span><i class="iconfont icon-download"></i>{{article.download_count}}</span> -->
      <span><i class="iconfont icon-browse"></i>{{article.browse_count}}</span>
      <span><i class="iconfont icon-date"></i>{{article.show_time}}</span>
    </div>
	</div>
</template>

<script type="text/javascript">
	export default {
	  name: 'resourcesGrid',
	  props:['article'],
	  data () {
	    return {
	      list:[],
	    }
	  },
	  created: function(){
	    // console.log(this.article);
	  },
	  methods: {

	  },
	}
</script>

<style type="text/css">
	.resources{background-color: #f9f9f9;}
	.resources a{color: #666;text-decoration: none;}
	.resources .image{height: 150px;padding: 10px;background-color: #fff;}
	.resources .image img{margin: 0 auto;width: 100%;height: 100%;}
	.resources .title{background-color: #fff;}
	.resources .title h4{padding: 8px 5px;text-align: center;border-bottom: 1px solid #efefef;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;}
	.resources .title h4 a{color: #337ab7}
	.resources .title h4 a:hover{color:#666;}
	.resources .describe{height: 70px;background-color: #fff;border-bottom: 1px solid #efefef;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;overflow: hidden;
	}
	.resources .describe p{padding: 5px;font-size: 16px;text-indent:2em;}
	.resources .info{padding: 8px;text-align: right;color: #666;background-color: #fff;}
	.resources .info span{margin: 0px 3px;}
	.resources .info span i{margin-right: 3px;color: #333;}

	@media screen and (max-width: 500px) {
		.resources{width: 98%;padding:1%;}
	}

	@media screen and (min-width: 500px) {
		.resources{width: 49%;float: left;padding: 0.5%;}
	}
	@media screen and (min-width: 1060px) {
		.resources{width: 32.333%;float: left;padding: 0.5%;}
	}
</style>